<!-- 使用setup语法糖 -->
<script setup lang="ts">
import { ref, reactive, computed } from "vue";

const msg = ref(1);
const obj = reactive({
  a: 2,
  b: 3,
});
const count = computed(() => {
  return msg.value + obj.b;
});
// 编辑器宏命令，不需要再import声明了
// 第一种注册方法
// defineProps({
//   params: {
//     type: String,
//     required: true,
//     default: "Hello",
//   },
// });
// 第二种方法：ts泛型
// defineProps<{
//   params: String;
//   list: Array<number>;
// }>();
// 第三种方法,ts泛型加默认值
const props = withDefaults(
  defineProps<{
    params: string;
    list: Array<number>;
  }>(),
  {
    params: 'hello world',
    list: () => [1]
  }
)
const clickTime = ref(0)
const emits = defineEmits(['parentClick'])
const clickEmit = () => {
  clickTime.value++
  const d = new Date().getDate()
  emits('parentClick','我是子组件setup,今天是' + d + '号,点击了' + clickTime.value + '次')
}
</script>

<template>
  <h1>{{ count }}</h1>
  <h1>{{ obj.a }}</h1>

  <div class="card">
    <button type="button" @click="msg++">msg is {{ msg }}</button>
    <button type="button" @click="clickEmit">子传父</button>
    <p>
      From parent
      <code>{{ params }}</code>
      <p v-for="item in list" :key="item">{{ item }}</p>
    </p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
